import Title from "@/components/Title";

const datas = [
    {
        title: "智能优化策略",
        desc: "算法引领，精准定位，策略升级",
        details: [
            {
                title: "动态模型适配",
                desc: "依据直播间动态，智能运行适配模型，精准引入目标观众群体",
                keywords: ["智能模型", "精准投放"],
            },
            {
                title: "数据驱动优化",
                desc: "数字员工实时介入，引导观众互动，延长观看时长，反促平台增推",
                keywords: ["数字员工", "互动提升"],
            },
            {
                title: "高潜用户锁定",
                desc: "数字员工监控互动内容，自动识别高潜用户，进而实现精准触达",
                keywords: ["高潜用户识别", "弹幕分析", "精准触达"],
            },
            {
                title: "精准触达",
                desc: "基于深度数据分析，不断优化直播策略，确保直播效果持续最大化",
                keywords: ["策略优化", "效果持续提升"],
            },
        ],
    },
    {
        title: "成本效益最大化",
        desc: "智能降本，高效提能，效益飞跃",
        details: [
            {
                title: "投放成本降低",
                desc: "减少不必要的流量采购，智能优化资源配置，大幅降低投放成本",
                keywords: ["资源优化", "大幅降本"],
            },
            {
                title: "直播效能提跃升",
                desc: "通过集成直播中控系统，一人轻松驾驭多直播间，运营效率显著提升",
                keywords: ["运营人效提升", "1v多直播间"],
            },
            {
                title: "自然流量激增",
                desc: "长期优化提升直播间质量，赢得平台自然流量倾斜",
                keywords: ["质量优化", "流量倾斜"],
            },
            {
                title: "转化率飙升",
                desc: "精细化调整直播内容，精准匹配观众需求，实现转化率大幅提升",
                keywords: ["需求匹配优化", "转化率提升"],
            },
        ],
    },
    {
        title: "矩阵式引流体系",
        desc: "智能协同，矩阵布局，高效引流",
        details: [
            {
                title: "矩阵中控管理",
                desc: "利用矩阵直播中控系统，集中管理和操作，提高引流效率",
                keywords: ["矩阵管理", "集中操作"],
            },
            {
                title: "全渠道整合引流",
                desc: "整合多个直播渠道，实现统一的观众引流和互动策略",
                keywords: ["全渠道", "统一整合"],
            },
            {
                title: "自动化精准引流",
                desc: "数字员工自动化执行引流任务，扩大直播间观众基础",
                keywords: ["自动引流", "智能分发"],
            },
            {
                title: "效果实时监控",
                desc: "实时监控引流效果，根据数据反馈调整引流策略",
                keywords: ["实时反馈"],
            },
        ],
    },
];

const bgStyles = [
    "*:first:bg-[url('/zhibozhikong/bg-0.png')] from-[rgba(123,220,255,0.2)] [&_dd]:border-b-[rgba(123,220,255,0.4)]",
    "*:first:bg-[url('/zhibozhikong/bg-1.png')] from-[rgba(185,176,255,0.2)] [&_dd]:border-b-[rgba(185,176,255,0.4)]",
    "*:first:bg-[url('/zhibozhikong/bg-2.png')] from-[rgba(255,200,154,0.2)] [&_dd]:border-b-[rgba(255,200,154,0.4)]",
];

const Panels = () => {
    return (
        <ul className="w-full laptop:max-w-7xl laptop:px-6 m-auto flex flex-col laptop:flex-row justify-center laptop:gap-7 *:grow *:bg-white laptop:*:drop-shadow-[0_0_20px_rgba(151,151,151,0.2)]">
            {datas.map((item, index) => (
                <li
                    key={index}
                    className="laptop:rounded-lg overflow-hidden pb-10"
                >
                    <div
                        className={`${bgStyles[index]} bg-gradient-to-b from-32% to-[rgba(255,255,255,0.2)] [&_dd]:border-b`}
                    >
                        <div
                            className={`bg-contain bg-right-top bg-no-repeat py-9 px-10 text-center laptop:text-left`}
                        >
                            <dl className="text-lg font-bold">{item.title}</dl>
                            <dd className="pt-3 pb-8 text-sm">{item.desc}</dd>
                        </div>
                    </div>
                    <div className="px-10 flex flex-col gap-8 items-center laptop:items-start text-center laptop:text-left">
                        {item.details.map((detail, index) => (
                            <div key={index} className="flex flex-col gap-2">
                                <dl className="text-base font-medium text-font-blue-200">
                                    {detail.title}
                                </dl>
                                <dd className="text-xs text-font-blue-100">
                                    {detail.desc}
                                </dd>
                                <div className="flex flex-wrap gap-2 justify-center laptop:justify-start">
                                    {detail.keywords.map((keyword, index) => (
                                        <span
                                            key={index}
                                            className="px-2 py-[0.2rem] text-font-blue-100 text-xs border border-gray-200 rounded-[0.24rem]"
                                        >
                                            {keyword}
                                        </span>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </li>
            ))}
        </ul>
    );
};

const Jubaopen = () => {
    return (
        <div className="laptop:pb-[10rem] overflow-hidden flex flex-col items-center bg-gradient-to-b from-white to-[#F7F9FF]">
            <Title desc="深度解析数据，数智精准引流，强劲驱动直播增长">
                直播智控——全面升级直播效能
            </Title>
            <Panels />
        </div>
    );
};

export default Jubaopen;
